<template>
    <div >
        <el-row :gutter="20">
            <el-col span="10">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                        <span>original</span>
                        </div>
                    </template>
                    <el-form ref ="o_form" :model="originalForm">
                        <el-form-item >
                            <el-input type="textarea" v-model="originalForm.original" :autosize="{minRows:10,maxRows:20}"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
            <el-col span="8" style="display: flex;">
                <el-button  type="info" plain @click="onSubmit" style="margin: auto;">formate</el-button>
            </el-col>
            <el-col span="10"  >
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                        <span>eventual</span>
                        </div>
                    </template>
                    <el-form ref ="e_form" :model="eventualForm" >
                        <el-form-item >
                            <el-input type="textarea" v-model="eventualForm.eventual" :autosize="{minRows:10,maxRows:20}"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
    
    
  </template>
  
<script>

    export default{
        data(){
            return{
                originalForm : {
                    original: ""
                },
                eventualForm:{
                    eventual:""
                }
            }
        },
        methods: {
            onSubmit() {
                const originalString = this.originalForm.original
                // const eventualString =  originalString.replace(/\n/g,",")
                // this.eventualForm.eventual = eventualString
                this.$http.post("/format",{original:originalString, replace:","}).then((response)=>{
                    const data = response.data;
                    this.eventualForm.eventual = data.eventual
                })
            },
        },
    }
</script>
<style scoped>
    .el-row {
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        } 
    }
    .el-col {
        border-radius: 4px;
        align-items: center;
    }
   
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .card-header {
        display: flex;
        /* 水平居中 */
        justify-content: center;
        /* 垂直居中 */
        align-items: center;  
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .box-card {
        width: 400px;
    }
</style>